<template>
    <div class="ml-16px mr-16px content-container">
        <div class="flex flex-center flex-wrap px-[60px] py-[30px]">
            <div class="px-17px py-30px">
                <div class="account-list text-center">
                    <p>点击授权抖音（蓝V企业号）</p>
                </div>
            </div>
            <div class="px-17px py-30px dy">
                <div class="account-list text-center">
                    <p>点击授权抖音</p>
                </div>
            </div>
            <div class="px-17px py-30px ks">
                <div class="account-list text-center">
                    <p>点击授权快手</p>
                </div>
            </div>
            <div class="px-17px py-30px xg">
                <div class="account-list text-center">
                    <p>点击授权西瓜视频</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">

</script>

<style lang="scss" scoped>
.account-list{
    width: 342px;
    height:240px;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.08);
    background-image: url("@/assets/images/lv-bg.png");
    background-size: 100%;
    background-repeat: no-repeat;
    overflow: hidden;
    p{
        margin-top: 128px;
        font-size: 14px;
        font-weight: 700;
        color: #000000;
        cursor: pointer;
    }
}
.dy{
    .account-list{
        background-image: url("@/assets/images/dy-bg.png");
    }
}
.ks{
    .account-list{
        background-image: url("@/assets/images/ks-bg.png");
    }
}
.xg{
    .account-list{
        background-image: url("@/assets/images/xg-bg.png");
    }
}
</style>